<!--
  @Descripttion: 其他服务-产品服务（改名平台架构）
  @Author：yuzhongfeng
  @Date：2022年10月17日 21:45:40
-->
<template>
  <section class="page">
    <div class="main">
      <div class="txtItem" v-for="(item, index) in dataList" :key="index">
        <img
          :src="
            require(`../../../assets/images/otherServices/icon-${
              index + 1
            }.png`)
          "
          alt=""
        />
        <div class="title">{{ item.title }}</div>
        <div class="content">{{ item.content }}</div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  // 组件名称
  name: "productService",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  // 组件状态值
  data() {
    return {
      dataList: [],
    };
  },
  computed: {},

  // 组件方法
  methods: {
    init() {
      this.dataList = [
        {
          title: "实习就业门户",
          content:
            "用人企业和学生可根据自身需求及权限进行实习就业信息发布，浏览、投递以及简历筛选等，可高效、精准匹配目标对象。",
        },
        {
          title: "信息共享交流平台",
          content:
            "数据人才自己的空间，定期召开人才交流会，整合各类信息资源、推动专业信息共享。",
        },
        {
          title: "数据菁英训练营",
          content:
            "学界顶级教授和业界资深专家强强联合，通过专题讲座、课程培训等方式，提升学生专业能力，指点学生职业发展。",
        },
        {
          title: "人才数据管理系统",
          content:
            "整合人才画像、招聘行为等多种数据源，覆盖全场景的业务分析与用户洞察，提供实时、多维度的数据可视化方案。",
        },
        {
          title: "招聘数据研究服务",
          content:
            "凭借雄厚的研究实力和海量数据人才招聘数据，面向企业、政府应用需求，提供数据分析研究、研报撰写服务，帮助决策者智能化、专业化决策。",
        },
        {
          title: '"定制化"人才培养体系',
          content:
            "围绕企业发展战略需求及企业人才短板，通过特色培训、主题项目创新开发等对人才进行潜质培养，为企业量身打造“定制化人才”，为企业发展助力赋能。",
        },
        {
          title: "创新项目孵化基地",
          content:
            "支持大学生在数据领域对新产品、新模式和新市场的开拓探索，解决社会、行业发展面临的痛点、难点问题。",
        },
        {
          title: "数据人才信息库",
          content:
            "精准收集汇总数据人才大数据，为政府领导决策提供科学依据，同时也为各类人才管理部门转变管理方式、优化服务流程提供新的便捷手段。",
        },
        {
          title: "产业规划研究",
          content:
            "基于海量人才数据及招聘数据，对地区人力资源布局、产业发展进行深入分析，提供地区产业发展及人才战略规划方案。",
        },
      ];
    },
  },
  created() {
    this.init();
  },
  mounted() {},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.main {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  overflow-x: hidden;
  padding: 110px 80px 0 195px;
  .txtItem {
    width: 250px;
    min-height: 290.8px;
    position: relative;
    margin-bottom: 102px;
    padding: 70px 25px 0;
    font-family: AlibabaPuHuiTi_2_75_SemiBold;
    background: #ffffff;
    box-shadow: 0px 0px 26px 1px rgba(196, 225, 249, 0.73);
    &:nth-child(3),
    &:nth-child(6),
    &:nth-child(9) {
      margin-right: 0;
    }
    &:hover img {
      top: -100px;
      box-shadow: 0px 0px 26px 1px rgba(196, 225, 249, 0.73);
    }
    img {
      position: absolute;
      width: 144px;
      left: 50%;
      top: -72px;
      transform: translateX(-50%);
      transition-duration: 0.3s;
      border-radius: 144px;
    }
    .title {
      position: relative;
      text-align: center;
      font-size: 20px;
      font-weight: 400;
      color: #000000;
      line-height: 28px;
      margin-bottom: 15px;
      z-index: 2;
    }
    .content {
      position: relative;
      font-size: 16px;
      font-weight: 400;
      color: #89898a;
      line-height: 24px;
      z-index: 2;
      text-align: justify;
    }
  }
}
</style>
